<template>
	<div class="Icons">
		<div class="Icon" v-for="item of iconList" :key="item.id">
			<div class="icon-img">
				<img class="icon-img-content" :src="item.imgUrl" :alt="item.name" style="opacity: 1;">
			</div>
			<div class="icon-des">
				{{item.name}}
			</div>	
		</div>
	</div>
</template>

<script>
export default {
	name: 'CityIcon',
	data () {
		return {
			iconList: [{
				id: '001',
				name: '景点门票',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
			}, {
				id: '002',
				name: '一日游',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png'
			}, {
				id: '003',
				name: '合肥必游',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png'
			}, {
				id: '004',
				name: '游乐场',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png'
			}, {
				id: '005',
				name: '自然风光',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png'
			}, {
				id: '006',
				name: '休闲玩乐',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/48/cb72b99b71974c02.png'
			}]
		}
	}
}
</script>

<style lang="stylus">
	.Icons
		overflow: hidden
		height: 0
		padding-bottom: 50%
		.Icon
			position: relative
			overflow: hidden
			float: left
			width: 25%
			height: 0
			padding-bottom: 25%
			.icon-img
				position: absolute
				left: 0
				right: 0
				top: 0
				bottom: 22px
				padding-bottom: 5px
				.icon-img-content
					display: block
					margin: 0 auto
					height: 100%
			.icon-des
				position: absolute
				left: 0
				right: 0
				bottom: 0
				line-height: 22px
				height: 22px
				color: #333
				text-align: center

</style>
